import { style, globalStyle } from '@vanilla-extract/css';
import { vars } from '../global.css';

const contentHeight = `calc(${vars.layout.inputHeight} - 0.4em)`;

export const tagStyle = style({
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'flex-start',
	flexWrap: 'wrap',
	borderRadius: vars.layout.smallRadius,
	transition: 'border-color .2s',
	padding: '0.2em 0.4em',
	overflow: 'hidden',
	lineHeight: vars.layout.inputHeight,
	minHeight: vars.layout.inputHeight,
	color: vars.color.regularText,
	backgroundColor: vars.color.baseBackground,
	border: `1px solid ${vars.color.border}`,
	outline: 'none',
	boxSizing: 'border-box',
	width: '20em',
	selectors: {
		'&.focus,&:focus': {
			border: `1px solid ${vars.color.brand}`,
		},
		'&.invalid': {
			borderColor: vars.color.danger,
		},
		'&[disabled]': {
			cursor: 'not-allowed',
			backgroundColor: vars.color.disableBackground,
			border: `1px solid ${vars.color.border}`,
		},
	},
});

globalStyle(`${tagStyle}>div`, {
	display: 'inline-flex',
	flexDirection: 'row',
	alignItems: 'center',
	justifyContent: 'center',
	minWidth: '2rem',
	color: vars.color.regularText,
	fontSize: '1rem',
	height: `calc(${vars.layout.inputHeight} - 0.8em)`,
	lineHeight: `calc(${vars.layout.inputHeight} - 0.8em)`,
	padding: '0 0.4em',
	margin: '0.2em',
	outline: 'none',
	border: 'none',
	borderRadius: '1em',
	background: vars.color.brandLight,
	boxSizing: 'border-box',
	maxWidth: '70%',
});

globalStyle(`${tagStyle}>div>span`, {
	overflow: 'hidden',
	textOverflow: 'ellipsis',
	marginLeft: '0.2em',
	whiteSpace: 'nowrap',
});
globalStyle(`${tagStyle}>div>svg`, {
	height: '1.2em',
	width: '1.2em',
	padding: '0 0 0 0.2em',
	fill: vars.color.primaryText,
});

globalStyle(`${tagStyle} input`, {
	flex: 1,
	minWidth: '2em',
	color: vars.color.regularText,
	fontSize: '1rem',
	height: contentHeight,
	lineHeight: contentHeight,
	padding: '0 0.2em',
	margin: 0,
	outline: 'none',
	border: 'none',
	background: 'none',
	boxSizing: 'border-box',
});

globalStyle(`${tagStyle}[select-only]`, {
	cursor: 'pointer',
});

globalStyle(`${tagStyle}[select-only]>input`, {
	cursor: 'pointer',
});

globalStyle(`${tagStyle}[readonly]>div>svg,${tagStyle}[disabled]>div>svg`, {
	display: 'none',
});
globalStyle(`${tagStyle}[disabled]>div`, {
	backgroundColor: vars.color.infoLight,
	userSelect: 'none',
});

globalStyle(`${tagStyle} input::-webkit-input-placeholder`, {
	color: vars.color.placeholderText,
});

globalStyle(`${tagStyle} input[disabled]`, {
	color: vars.color.disabledText,
	cursor: 'not-allowed',
});

globalStyle(`${tagStyle} svg`, {
	flexShrink: '0',
	height: '2.2em',
	width: '2.2em',
	padding: '0 0.4em',
	fill: vars.color.placeholderText,
	cursor: 'default',
});

globalStyle(`${tagStyle}[disabled] svg`, {
	fill: vars.color.disabledText,
});

globalStyle(`${tagStyle}>span`, {
	display: 'none',
});

globalStyle(`${tagStyle}[select-only]>span`, {
	display: 'inline-flex',
	height: `calc(${vars.layout.inputHeight} - 1em)`,
	width: `calc(${vars.layout.inputHeight} - 1em)`,
	backgroundColor: vars.color.infoBackground,
	justifyContent: 'center',
	alignItems: 'center',
	borderRadius: '1em',
	cursor: 'pointer',
	marginLeft: '0.5em',
});

globalStyle(`${tagStyle}[readonly],${tagStyle}[readonly]>input,${tagStyle}[readonly]>svg`, {
	cursor: 'default',
});

globalStyle(`${tagStyle}[disabled],${tagStyle}[disabled]>input,${tagStyle}[disabled]>svg`, {
	cursor: 'not-allowed',
});
